<template>
	<view>
		<!-- #ifdef H5 || MP-WEIXIN -->
		<uNavbar title="支付确认" bgColor="#F5F7F5"> </uNavbar>
		<!-- #endif -->
		
		<view class=" flex_ZC">
			<view class="money flex_ZC">
				<text class="money_txt">{{totalPrice}}</text>
				<text class="f28 c6">订单金额</text>
			</view>
			<!-- #ifdef H5 -->
			<view class="mart90">
				<view class="coupon flex_ld" @click="changeCoupons(item)" v-for="(item,index) in zhifuList">
					<view class="coupon_l flex_dq">
						<image :src="item.img" mode="aspectFill"></image>
						<text class="f30 c3">{{item.name}}</text>
					</view>
					<view class="coupon_r flex_dq">
						<image v-if="item.state" class="checkboxHead" :src="baseUrl + '/static/icon/i_xz.png'"
							mode="aspectFill">
						</image>
						<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>

			<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
			<view class="coupon flex_ld" @click="changeCoupons(item)" v-for="(item,index) in zhifuList2">
				<view class="coupon_l flex_dq">
					<image :src="item.img" mode="aspectFill"></image>
					<text class="f30 c3">{{item.name}}</text>
				</view>
				<view class="coupon_r flex_dq">
					<image v-if="item.state" class="checkboxHead" :src="baseUrl +'/static/icon/i_xz.png'"
						mode="aspectFill">
					</image>
					<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill">
					</image>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="coupon flex_ld" @click="changeCoupons(item)" v-for="(item,index) in zhifuList2">
				<view class="coupon_l flex_dq">
					<image :src="item.img" mode="aspectFill"></image>
					<text class="f30 c3">{{item.name}}</text>
				</view>
				<view class="coupon_r flex_dq">
					<image v-if="item.state" class="checkboxHead" :src="baseUrl +'/static/icon/i_xz.png'"
						mode="aspectFill">
					</image>
					<image v-else class="checkboxHead" :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill">
					</image>
				</view>
			</view>
			<!-- #endif -->
			<web-view v-if="tipshow" :src="pay_url"></web-view>
			<view class=" flex_c btn1 gradient1 mart86" @click="$u.debounce(keyboardShow=true, 300)">
				<text class="f32 c0">确认支付</text>
			</view>
			<u-keyboard ref="uKeyboard" dotDisabled mode="number" bgColor="transparent" closeOnClickOverlay :tooltip="false"
				:show="keyboardShow" @close="isClose" @change="changePwd" @backspace="backspace">
				<view class="keyboardss flex_ZC">
					<u-code-input dot space="26" :maxlength="6" v-model="securityPwd"></u-code-input>
				</view>
			</u-keyboard>
		</view>
	</view>
</template>

<script>

	import {
		serviceVoucherPay,
		paymentStatus
	} from "../../api/local.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				id: '',
				totalPrice: 0,
				shopFlag: false,
				orderInfo: {},
				zhifuList: [
					// {
					// 	id: 1,
					// 	name: '微信支付',
					// 	state: true,
					// 	img: 'https://images.fudiemall.com/static/icon/i_wxPay.png',
					// 	pay_way: 'wxpay'
					// },

					{
						id: 2,
						name: '增值服务点券',
						state: true,
						img: 'https://images.fudiemall.com/storage/default/20250508/dq802c09cef1740f3b7908a41849214a730d323980.png',
						pay_way: 'service_voucher'
					},
					// {
					// 	id: 3,
					// 	name: '云闪付支付',
					// 	state: false,
					// 	img: '/static/icon/ysf.png',
					// 	pay_way: 'unionpay'
					// },
					// {
					// 	id: 2,
					// 	name: 'xx支付',
					// 	state:false,
					// 	img: '/static/icon/sh.png'
					// },
				],

				type: "",
				pay_way: "service_voucher",
				pay_url: "",
				tipshow: false,
				isfrom: "",
				paydata:{},
					keyboardShow: false,
					securityPwd: "",
					payShow: false,
			}
		},
		onLoad(e) {
			// this.getEnv()
			// console.log(e);
			this.tipshow = false
			if (e) {
				
				this.id = e.id
				this.totalPrice = e.totalPrice
			}

		},
		onShow(e) {
			// this.tipshow = false
			// if (e) {
			// 	this.type = e.type
			// 	this.id = e.id
			// 	this.totalPrice = e.totalPrice
			// }
			// this.checkstatus()
		},
		watch: {
			securityPwd(newValue) {
				console.log(newValue.length);
				if (newValue.length >= 6) {
					this.keyboardShow = false
					this.confrimPay()
				}
			}
		},
		methods: {
			getEnv() {
				let isfrom;
				// 小程序环境判断

				// H5环境判断
				// #ifdef H5
				
					const ua = navigator.userAgent.toLowerCase();
					if (ua.match(/Alipay/i)) {
						isfrom = '支付宝浏览器';
						this.zhifuList = [{
							id: 2,
							name: '支付宝支付',
							state: true,
							img: 'https://images.fudiemall.com/static/icon/alipay.png',
							pay_way: 'alipay'
						}, ]
						this.pay_way = "alipay"
					} else if (ua.match(/MicroMessenger/i)) {
						isfrom = '微信内置浏览器';
						this.zhifuList = [{
								id: 1,
								name: '微信支付',
								state: true,
								img: 'https://images.fudiemall.com/static/icon/i_wxPay.png',
								pay_way: 'wxpay'
							},

						]
						this.pay_way = "wxpay"
					} else {
						isfrom = '普通浏览器';
						this.zhifuList = [{
							id: 2,
							name: '支付宝支付',
							state: true,
							img: 'https://images.fudiemall.com/static/icon/alipay.png',
							pay_way: 'alipay'
						}, ]
						this.pay_way = "alipay"
					}
				
				// #endif
				// #ifdef MP-WEIXIN
				this.zhifuList2 = [{
						id: 1,
						name: '微信支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/i_wxPay.png',
						pay_way: 'wxpay'
					},

				]
				this.pay_way = "wxpay"
				// #endif
				// #ifdef MP-ALIPAY
				this.zhifuList2 = [{
						id: 1,
						name: '支付宝支付',
						state: true,
						img: 'https://images.fudiemall.com/static/icon/alipay.png',
						pay_way: 'alipay'
					},

				]
				this.pay_way = "alipay"
				// #endif
				this.isfrom = isfrom
				return isfrom;
			},
			isClose() {
				this.keyboardShow = false
				this.payShow = true
			},
			// 输入密码
			changePwd(val) {
				if (this.securityPwd.length < 6) {
					this.securityPwd += val;
					// console.log(this.securityPwd);
				} else {
					console.log('超出不累计');
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},
			checkstatus() {
				paymentStatus({
					id: this.id,
					type: this.type
				}).then(res => {
					if (res.code == 1) {
						if (res.data.pay_status == 2) {
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesMy/cloudCat/paySuccess?type=' + this.type
								})
							}, 1200)
						}
					}
				})
			},
			// 支付方式 
			changeCoupons(item) {
				this.pay_way = item.pay_way
				this.zhifuList.forEach((item) => item.state = false)
				item.state = true

			},
			confrimPay() {
				let data = {
					id: this.id,
					pay_way: this.pay_way,
					pay_password: this.securityPwd,
				}
				serviceVoucherPay(data).then(res => {
					if (res.code == 1) {
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesMy/cloudCat/paySuccess?type=2' 
								})
							}, 1200)
					}
				})

			},
		}
	}
</script>

<style scoped>
	.money {
		margin-top: 80rpx;
	}

	.money_txt {
		font-size: 76rpx;
		font-weight: 500;
		color: #333333;
	}

	.mart90 {
		margin-top: 90rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.coupon {
		width: 690rpx;
		height: 154rpx;
		padding: 0 48rpx;
	}

	.line {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.coupon_l>image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 24rpx;
	}

	.checkboxHead {
		width: 36rpx;
		height: 36rpx;
		margin-left: 12rpx;
	}

	.mart86 {
		margin-top: 86rpx;
	}
	.keyboardss {
		width: 750rpx;
		padding: 50rpx 0;
		background: #ffffff;
	}
</style>